<template>
    <div class="div">
      <div class="top">
        <div>
          <span><van-icon @click="rehome" name="arrow-left" /></span
          ><span>返回</span>
        </div>
        <div>购物车</div>
      </div>
      <div class="content" ref="scroll">
        <ul>
          <li v-for="item in cart" :key="item._id">
            <div class="inp">
              <input type="checkbox" class="inpD" v-model="item.checked" />
            </div>
            <div class="img_c">
              <img :src="item.image" alt="" />
              <div class="c">
                <p>{{ item.title }}</p>
                <p>{{ item.detail }}</p>
                <p>
                  <span>{{ item.cuxiao ? item.cuxiao : "" }}</span>
                  <span>{{ item.jindong ? item.jindong : "" }}</span>
                </p>
                <p>{{ item.price }}</p>
                <!-- 加减封装组件 -->
                <control :item="item"></control>
                
              </div>
            </div>
          </li>
        </ul>
        <div class="notice">
          <van-notice-bar class="van-notice-bar"
            >技术是开发它的人的共同灵魂。</van-notice-bar
          >
        </div>
      </div>
      <div class="cart">
        <div>
          <label>
            <input
              type="checkbox"
              v-model="selectAll"
              @change="toggleSelectAll"
            />
            全选
          </label>
        </div>
        <div>合计：{{ totalPrice }}</div>
        <div>
          <button>提交订单</button>
        </div>
      </div>
    </div>
  </template>
    
    <script>
  import control from "@/components/control.vue";
  import BScroll from "better-scroll";
  export default {
    data() {
      return {
        cart: [],
        selectAll: false,
      };
    },
    methods: {
      async getCart() {
        let res = await this.axios.get("/moke/cart.json");
        console.log("cart", res.data.bookList);
        this.cart = res.data.bookList;
      },
      toggleSelectAll() {
        this.cart.forEach((item) => {
          item.checked = this.selectAll;
        });
      },
      scrollToTop() {
        this.scroll.scrollTo(0, 0, 500);
      },
      rehome() {
        this.$router.push("/");
      },
    },
    components: {
      control,
    },
    created() {
      this.getCart();
    },
    mounted() {
      this.scroll = new BScroll(this.$refs.scroll, {
        probeType: 3,
        click: true,
        scrollbar: {
          interactive: true,
        },
      });
    },
    computed: {
      isAllSelected() {
        return this.cart.every((item) => item.checked);
      },
      selectedItem() {
        return this.cart.filter((item) => item.checked);
      },
      totalPrice() {
        if (this.selectedItem.length === 0) {
          return 0;
        }
        return this.selectedItem.reduce((total, item) => {
          return (total += item.count * item.price);
        }, 0);
      },
    },
    watch: {
      isAllSelected(newV) {
        this.selectAll = newV;
      },
    },
  };
  </script>
  <style lang="scss" scoped>
  * {
    padding: 0;
    margin: 0;
  }
  .div {
    position: relative;
    background: #fbfffb;
    height: 100vh;
    .top {
      height: 1rem;
      width: 100%;
      line-height: 1rem;
      display: flex;
      padding: 0 0.2rem;
      position: fixed;
      div:nth-of-type(1) {
        color: blue;
        margin-right: 40%;
      }
    }
    .content {
      position: absolute;
      top: 1rem;
      height: calc(100vh - 3rem);
      overflow: hidden;
      position: relative;
      width: 100%;
      ul {
        height: 19rem;
        li {
          .inp {
            height: 0.9rem;
            line-height: 0.9rem;
            .inpD {
              //  是针对 WebKit 浏览器（如 Chrome 和 Safari）的私有属性，用于禁用元素的默认外观样式。
              -webkit-appearance: none;
              // 是针对 Mozilla Firefox 浏览器的私有属性，用于禁用元素的默认外观样式
              -moz-appearance: none;
              // 是一个标准属性，用于禁用元素的默认外观样式。
              // 这些属性通常用于自定义表单元素的样式，例如按钮、复选框、单选框等。
              // 通过将这些属性设置为 none，可以禁用浏览器的默认外观样式，并使用自定义的样式来替代。
              appearance: none;
              display: inline-block;
              width: 0.5rem;
              height: 0.5rem;
              border: 0.02rem solid #ccc;
              border-radius: 50%;
              // 去掉元素的焦点样式，当元素被聚焦时不显示任何外观效果。
              outline: none;
              margin-right: 10px;
              // 使元素在垂直方向上居中对齐。
              vertical-align: middle;
            }
  
            .inpD:checked {
              background-color: red;
            }
          }
          .img_c {
            background: #f6faf6;
            padding: 0.2rem;
            display: flex;
            img {
              width: 2.3rem;
              height: 2.3rem;
              margin-right: 0.2rem;
            }
            .c {
              flex: 1;
            }
          }
        }
      }
      .notice {
        // margin: 0 0.2rem;
        position: fixed;
        width: 100%;
        height: 0.7rem;
        bottom: 2rem;
        .van-notice-bar {
          height: 0.7rem;
          box-sizing: border-box;
          padding: 0 0.2rem;
        }
      }
    }
    .cart {
      position: fixed;
      bottom: 1rem;
      background: #ffff;
      height: 1rem;
      box-sizing: border-box;
      display: flex;
      padding: 0.2rem 0.2rem;
      width: 100%;
    }
  }
  </style>